<template>
  <div>
    <ul class="message-content">
      <li v-for="item in messageArr" :key="item.id">
        <van-cell
          :value="item.createTime"
          :label="'发布人：' + item.sourceName"
          :icon="
            require(item.type == 1
              ? '../assets/images/系统消息.png'
              : '../assets/images/个人信息.png')
          "
          is-link
          @click="goDetai(item)"
        >
          <!-- 使用 title 插槽来自定义标题 -->
          <template #title>
            <span class="custom-title">{{
              item.type == 1 ? "系统消息" : "个人消息"
            }}</span>
            <img
              v-show="item.top == 1"
              src="../assets/images/置顶.png"
              alt=""
              class="upTop"
            />
          </template>
        </van-cell>
        <img
          src="../assets/images/红点.png"
          alt=""
          v-show="item.isReader !== 0"
          class="redDot"
        />
      </li>
    </ul>
  </div>
</template>

<script>
import {msgUnRead} from '../request/api'
export default {
  props: ["messageArr"],
  data() {
    return {
        token:""
    };
  },
  created(){
      this.token=localStorage.getItem('token')
  },
  methods: {
    goDetai(item) {
      this.$router.push({
        name: "messageDetail",
        query: {
          item: item,
        },
      });
    msgUnRead({
        id:item.id
    }).then(res=>{
        console.log(res);
    })

    },
  },
};
</script>
 
<style lang = "less" scoped>
.message-content {
  margin-top: 10px;
  width: 100%;
  background-color: #fff;

  li {
    border-bottom: 1px solid #e5e5e5;
    position: relative;

    .redDot {
      width: 10px;
      position: absolute;
      top: 15px;
      left: 60px;
    }
    .upTop {
      width: 10px;
      margin-left: 5px;
    }
  }
}

/deep/ .van-icon__image {
  width: 100%;
  height: 40px;
  margin-top: 8px;
}
</style>